<template>
  <div class="websiteOptimization-advantages">
    <div class="title">
		<img src="@/assets/image/websiteOptimization/img／common／title／advantages@2x.png" alt="" style="width: 184px;height: 88px;object-fit: cover;" />
   <!--   <p>
        <span class="title-h1">平台</span>
        <span class="title-h2">优势</span>
        <span class="title-icon ml-4"></span>
      </p>
      <p class="title-en">our advantages</p> -->
    </div>
    <p class="advantages-disc" style="text-align: center;">
   面对网站优化难题，我们提供一站式解决方案！从网站结构优化、内容质量提升，到关键词策略制定和用户体验优化，我们拥有专业的团队和丰富的经验，帮助您的网站在搜索引擎中脱颖而出，提升排名和流量。选择我们，让网站优化不再成为难题，助您实现网络营销目标。
    </p>
    <ul class="advantage-list">
      <li class="mt-24" v-for="item in advantageList" :key="item.titleEn">
        <p class="advatage-disc">{{ item.disc }}</p>
        <span class="icon"></span>
        <div class="title-info">
          <h3>{{ item.title }}</h3>
          <p class="item-title-en mt-4">{{ item.titleEn }}</p>
          <p class="item-title-brif mt-12">{{ item.brif }}</p>
        </div>
        <div class="more" @click="handleOpenChat">
          <div class="more-inner">
            More <el-icon size="12"><ArrowRightBold /></el-icon>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ArrowRightBold } from "@element-plus/icons-vue";
import EventBus from "@/utils/eventBus.js";
const props = defineProps({
  chatInfo: {
    type: String,
    default: "",
  },
});
const handleOpenChat = () => {
  EventBus.emit("openCustomerChat", {
    message: props.chatInfo,
  });
};
const advantageList = [
  {
    disc: "同等成本,让您的关键词排名靠前;同样市场,锁定目标客户快速吸引询盘;帮你获得更快、更准、更多的目标流量.",
    title: "关键词优化服务",
    titleEn: "Keyword optimize",
    brif: "更快 · 更准确",
  },
  {
    disc: "整站优化不以单个关键词排名为标准,而是以进入搜索引擎首页或前三名的关键词数量和整体目标搜索量为依据. 根据约定的关键词数量或网站权重进行考核.",
    title: "整站优化服务",
    titleEn: "Entire web optimize",
    brif: "搜索量 · 数量 · 权重",
  },
  {
    disc: "建立好的外链关系与链接;对外部资源的引用...  可对网站的SEO价值创造巨大提升.",
    title: "外链优化",
    titleEn: "External link",
    brif: "SEO价值提升",
  },
  {
    disc: "优化网站结构使其有良好的导航用途. 包括在网站不同页面之间、不同层级之间的链接.",
    title: "网站结构优化",
    titleEn: "Structure optimize",
    brif: "优化 · 重构 · 高效",
  },
  {
    disc: "根据不同需求提供具有针对性的方案和服务. 例如根据产品特性、目标客户搜索习惯等量身定制方案.",
    title: "专业高效服务",
    titleEn: "Professional service",
    brif: "挖掘痛点 · 有的放矢",
  },
];
</script>

<style lang="scss" scoped>
.websiteOptimization-advantages {
  width: $aiseoHomeWidth;
  margin: 0 auto;
  margin-top: 80px;
  .title {
    width: 180px;
    margin: 0 auto;
  }
  p {
    .title-h1 {
      font-family: HelloFont WenYiHei, HelloFont WenYiHei;
      font-weight: 400;
      font-size: 48px;
      color: #1a1a1a;
    }
    .title-h2 {
      font-family: HelloFont WenYiHei, HelloFont WenYiHei;
      font-weight: 400;
      font-size: 32px;
      color: #1a1a1a;
    }
    .title-icon {
      display: inline-block;
      width: 16px;
      height: 4px;
      background: #e62e3d;
      border-radius: 0px 0px 0px 0px;
    }
  }
  .title-en {
    font-family: Poiret One;
    font-weight: 400;
    font-size: 24px;
    color: #1a1a1a;
  }
  .advantages-disc {
    margin: 32px auto 40px auto;
    width: 1000px;
    font-weight: 400;
    font-size: 20px;
	letter-spacing: 0.7px;
    color: #808080;
    line-height: 36px;
    font-family: Alibaba PuHuiTi-Regular;
    word-wrap: break-word;
  }
  .advantage-list {
    padding: 8px 37px 0 3px;
    box-sizing: border-box;
    > li {
      height: 185px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 40px 48px 40px 96px;
      box-sizing: border-box;
      border-radius: 24px 24px 24px 24px;
      position: relative;
      transition: all 0.5s;
      .more {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0;
        right: -200px;
        width: 94px;
        height: 46px;
        border-radius: 24px 24px 24px 24px;
        border: 2px solid #e62e3d;
        padding: 2px;
        box-sizing: border-box;
        cursor: pointer;
        transition: all 0.5s;
        &:hover {
          .more-inner {
            background: #e62e3d;
            color: #1a1a1a;
          }
        }
        .more-inner {
          width: 100%;
          height: 100%;
          font-family: HelloFont WenYiHei, HelloFont WenYiHei;
          font-weight: 400;
          font-size: 18px;
          color: #e62e3d;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 400;
          border-radius: 24px;
          .el-icon{
              transform: translateY(1px);
            }
        }
      }
      &:hover {
        border: 1px solid #e62e3d;
        box-sizing: border-box;
        padding-left: 40px;
        justify-content: flex-start;
        transition: all 0.5s;
        .title-info{
            margin-left: 40px;
        }
        .icon {
          display: none;
        }
        .more {
          opacity: 1;
          right: 40px;
          cursor: pointer;
          transition: all 0.5s;
        }
      }
      .advatage-disc {
        font-family: Alibaba PuHuiTi-Regular;
        font-weight: 400;
        font-size: 20px;
        color: #808080;
		letter-spacing:1px;
        width: 660px;
        line-height: 48px;
      }
      .icon {
        display: inline-block;
        width: 4px;
        height: 20px;
        background: #e62e3d;
        border-radius: 0px 0px 0px 0px;
      }
      .title-info {
        width: 240px;
        h3 {
          font-family: Alibaba PuHuiTi-Regular;
          font-weight: bold;
          font-size: 32px;
          color: #1a1a1a;
        }
        .item-title-en {
          font-family: Poiret One;
          font-weight: 400;
          font-size: 20px;
          color: #1a1a1a;
        }
        .item-title-brif {
          font-family: Alibaba PuHuiTi-Regular;
          font-weight: 400;
          font-size: 16px;
          color: #808080;
        }
      }
    }
  }
}
</style>
